<template>
    <view>
      <!--                 :style="{
                    'background-color': labelData.extendS1,
                    'color': labelData.extendS2,
                    'fontSize':fontSize
                  }" -->
      <view   > 
       <view :class="cssClass" class="xmlb-item-2"  :style="cssStyle">{{ labelData.dictLabel || '' }} </view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
      props: {
          value: {},
          dictType: {
              type: String,
              default: ''
          },
          dictList: {
              type: Array,
              default: () => []
          },
          fontSize:{
              type: String,
              default: '28rpx'
          }
      },
      data() {
          return {
              labelData:{
              },
              cssClass:'',
              cssStyle:''
          };
      },
      watch: {
          value(val, oldVal) {
              this.loadData();
          },
          // dictType(val, oldVal) {
          // 	this.loadData();
          // },
      },
      created() {
          setTimeout(() => {
              this.loadData();
          }, 500);
      },
      methods: {
          loadData() {
              try {
  
                  if (this.dictList.length > 0){
              
                          let arr = this.dictList.filter(item=>{
                              return item.dictValue == this.value
                          })
                          if(!arr.length){
                              this.labelData = {
                                  extendS1:'',
                                  extendS2:'',
                                  dictLabel:''
                              }
                              this.cssClass = ' '
                          }else{
                              this.labelData = {
                                  extendS1:arr[0]['extend'] ? arr[0]['extend']['extendS1'] : '',
                                  extendS2:arr[0]['extend'] ? arr[0]['extend']['extendS2'] : arr[0]['cssStyle'],
                                  dictLabel:arr[0]['dictLabel'],
                              }
                              // this.cssClass = arr[0].cssClass
                              // this.cssClass 空格替换成 -
                              this.cssClass = arr[0]?.cssClass?.replace(/\s+/g, "-")
                              this.cssStyle = arr[0]?.cssStyle
                              // this.cssStyle 和'fontSize':fontSize 合并
                              if(this.cssStyle){
                                  this.cssStyle = this.cssStyle + ';font-size:' + this.fontSize
                              }else{
                                  this.cssStyle = 'font-size:' + this.fontSize
                              }
                          }
                      }
              } catch (error) {
              console.error('Error in loadData:', error);
              }
  
              
          },
          
      
      }
  }
  </script>
  
  <style>
  .xmlb-item-2 {
    padding: 10rpx 16rpx;
    border-radius: 30rpx;
    font-size: 20rpx;
    margin-left: 10rpx;
  }
  .tag-green {
      color: #389e0d;
      background: #f6ffed;
      border-color: #b7eb8f;
  }
  .tag-orange {
      color: #d46b08;
      background: #fff7e6;
      border-color: #ffd591;
  }
  .tag-pink {
      color: #c41d7f;
      background: #fff0f6;
      border-color: #ffadd2;
  }
  .tag-purple {
      color: #531dab;
      background: #f9f0ff;
      border-color: #d3adf7;
  }
  .tag-red {
      color: #cf1322;
      background: #fff1f0;
      border-color: #ffa39e;
  }
  .tag-blue {
      color: #096dd9;
      background: #e6f7ff;
      border-color: #91d5ff;
  }
  .tag-error {
        color: #ED6F6F;
        background: #fff2f0;
        border-color: #fff1f0;
    }
    .tag-cyan {
        color: #08979c;
        background: #e6fffb;
        border-color: #87e8de;
    }
    .tag-default{
        color: rgba(0, 0, 0, 0.85);
        background: #f2f0f0;
        border-color:  #d9d9d9;
    }
  </style>